<template>
  <div class="i-card">
    <div class="i-card__header">
      <div class="i-card__left">
        <img src="@/assets/images/login.png" />
        <div class="i-card__name">
          <div>上古暗杀</div>
          <span>市场专员</span>
        </div>
      </div>
      <span class="i-card__date">2023/02/02 12:22</span>
    </div>
    <div class="i-card__content">
      <van-text-ellipsis  rows="3" expand-text="展开" dots="..." collapse-text="收起" :content="text" />
    </div>
    <div class="i-card__imgs">
      <img src="@/assets/images/login.png" />
      <img src="@/assets/images/login.png" />
      <img src="@/assets/images/login.png" />
    </div>
    <div class="i-card__footer">
      <span class="num">1222次浏览</span>
      <div class="actions">
        <div>
          <img src="@/assets/images/xxts.png" />
          <span>赏</span>
        </div>
        <div>
          <img src="@/assets/images/sc.png" />
          <span>赞</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script name="ICard" setup>
import { ref } from "vue"
const text = ref('企业运营模式是网络经济兴起后的一个新热门话题，作为企业生存业生存赢利的关键要素和要素之间的逻辑关系，它决定着一个企业的市场经营成果经营')
</script>
<style lang="scss" scoped>
.i-card {
  padding: 16px;
  background-color: #fff;
  border-radius: 8px;

  &__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }

  &__left {
    display: flex;
    align-items: center;

    img {
      width: 36px;
      height: 36px;
      border-radius: 50%;
    }
  }

  &__date {
    font-size: 14px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #676b6b;
    line-height: 20px;
  }

  &__name {
    padding-left: 6px;

    div {
      font-size: 14px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #1e1f1f;
      line-height: 20px;
    }

    span {
      font-size: 12px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #898e8d;
      line-height: 17px;
    }
  }

  &__content {
    position: relative;
    padding-top: 14px;
    font-size: 14px;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #272b2d;
    line-height: 22px;
    text-align: justify;
    ::v-deep .van-text-ellipsis__action{
      color: #0dc678;
    }
  }

  &__imgs {
    padding-top: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    img {
      width: 96px;
      height: 96px;
      border-radius: 4px;
    }
  }

  &__footer {
    padding-top: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .num {
      font-size: 12px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #676b6b;
    }

    .actions {
      display: flex;
      align-items: center;

      div {
        margin-left: 20px;

        span {
          font-size: 12px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #272b2d;
        }
      }

      img {
        width: 16px;
        transform: translateY(3px);
        margin-right: 6px;
        height: 16px;
      }
    }
  }
}</style>